<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style>
		        .active {
		            background: orange;
		        }
		    </style>
	</head>
	<body>
		 <button id="btn1">按钮1</button>
		    <button id="btn2">按钮2</button>
		    <button id="btn3">按钮3</button>
		    <button id="btn4">按钮4</button>
			<script type="text/javascript">
				//给按钮绑定点击事件改变背景颜色
				 //【1】点击的时候添加背景颜色
				 //获取button元素集合，通过button标签名获取
				 var btn = document.getElementsByTagName('button');
				 //
				 //这个循环结束后 i=4
				 //获取每个按钮的下标代表他们
				 for(var i=0;i<btn.length;i++){
					 btn[i].onclick=function(){
						 //btn[i].className='active' btn[i]=btn[4] 会报错
						 this.className='active';
						 
					 }
					 
				 }
				 
			</script>
	</body>
</html>
